import { useState } from 'react';
import { Tabs } from 'antd';
import Menu from './components/Menu';
import Action from './components/Action';
import Model from './components/Model';
import { TextWidget } from '@inbiz/react';

const { TabPane } = Tabs;

const FunPermission = (props: any) => {
  const { appList, currentTab, permConfig, appId, containerHeight } = props;
  const [selectedKey, $selectedKey] = useState(
    permConfig.permType?.length ? permConfig.permType[0] : '',
  );

  const callback = (key: any) => {
    $selectedKey(key);
  };
  return currentTab == 'fun' && appList?.length ? (
    <Tabs
      defaultActiveKey={
        permConfig.permType?.length ? permConfig.permType[0] : ''
      }
      animated={false}
      style={{ height: '100%', paddingTop: 16, minWidth: 1200 }}
      onChange={callback}
      tabBarStyle={{
        width:
          permConfig.permType?.length &&
          (selectedKey == 'menu' || selectedKey == 'model')
            ? '360px'
            : '720px',
      }}
    >
      {permConfig.permType?.length && permConfig.permType.includes('menu') ? (
        <TabPane tab={<TextWidget>Permission.menu</TextWidget>} key="menu">
          <Menu
            appList={appList}
            permConfig={permConfig}
            containerHeight={containerHeight}
          />
        </TabPane>
      ) : (
        ''
      )}
      {permConfig.permType?.length && permConfig.permType.includes('action') ? (
        <TabPane
          tab={<TextWidget>Permission.action</TextWidget>}
          key="action"
        >
          <Action
            appList={appList}
            permConfig={permConfig}
            containerHeight={containerHeight}
          />
        </TabPane>
      ) : (
        ''
      )}
      {permConfig.permType?.length && permConfig.permType.includes('model') ? (
        <TabPane
          tab={<TextWidget>Permission.model</TextWidget>}
          key="model"
        >
          <Model
            appList={appList}
            permConfig={permConfig}
            appId={appId}
            containerHeight={containerHeight}
          />
        </TabPane>
      ) : (
        ''
      )}
    </Tabs>
  ) : (
    <></>
  );
};

export default FunPermission;
